import { useCallback, useEffect, useMemo, useState } from 'react';
import axios from "axios";
import { SwatchesPicker } from 'react-color';
import "./effect.css"
// TODO: 1、你两个组件，同时请求俩接口，因为是异步的，所以有可能接口同时返回，即同时setState
// TODO: 1、子换位置 2、子删除 
// TODO：buttn onclick变化
function ParentEffect() {
    const [count, setCount] = useState(0);

    const setCountCb = useCallback(() => {
        setCount((pre) => pre + 1)
    }, []);

    //! first side effect
    useEffect(() => {
        console.log("ParentEffect useEffect1");
        return () => {
            console.log("ParentEffect useEffect callBack1");
        }
    });

    //! second side effect
    useEffect(() => {
        console.log("ParentEffect useEffect2");
        return () => {
            console.log("ParentEffect useEffect callBack2");
        }
    });

    const childEffect1 = useMemo(() => <ChildEffect1 />, []);

    // const child = useMemo(() => <ChildEffect />, []);
    return (
        <div>
            {count}
            <button onClick={setCountCb}>+1</button>
            {/* {child} */}
            <ChildEffect />
            {childEffect1}
        </div>
    );
}

function ChildEffect() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        console.log("ChildEffect useEffect");
        return () => {
            console.log("ChildEffect useEffect callBack");
        }
    });

    // test update queue
    const testUpdateQueue = () => {
        axios.post("http://localhost:3000/register")
    }

    return (
        <div>
            childEffect
            <button onClick={testUpdateQueue}>childBtn</button>
        </div>
    );
}

function ChildEffect1() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        console.log("ChildEffect1 useEffect");
        return () => {
            console.log("ChildEffect1 useEffect callBack");
        }
    });

    // test update queue
    const testUpdateQueue = () => {
        setCount(1);
        setCount(2);
        setCount(3);
        setCount(4);
        setCount(5);
        setCount(6);
    }

    return (
        <div>
            childEffect1
            <button onClick={testUpdateQueue}>childBtn1</button>
        </div>
    );
}

function PP() {
    return (
        <div>
            1
            <span>2</span>
        </div>
    );
}

const Counter = () => {
    // const [count, setCount] = useState(0);
    // useEffect(() => {
    //     let timer = setInterval(() => {
    //         // setCount(count + 1);
    //         setCount(count => count + 1);
    //     }, 1000)
    //     return () => clearInterval(timer);
    // }, [])
    return (
        <SwatchesPicker

            className={"cccccc"}
        />
    )
}

export default Counter;
